<template>
  <div class="manageClass">
    <el-pagination
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
    name:"managePubilcPagination",
    // props:{
    //     el_pagination:{
    //         total:{
    //             type:Number,
    //             default:0
    //         },
    //         pageSize:{
    //             type:Number,
    //             default:10
    //         },
    //         currentPage4:{
    //             type:Number,
    //             default:1
    //         }
    //     }
    // },
    created() {
      this.$store.dispatch("pagination/set_pageSize", 10);
      this.$store.dispatch("pagination/set_currentPage4", 1);
    },
    computed:{
      total(){
          return this.$store.getters.total
      },
      pageSize(){
          return this.$store.getters.pageSize
      },
      currentPage4(){
          return this.$store.getters.currentPage4
      } 
    },
    methods: {
      // 每页 ${val} 条
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        // this.$emit("el-handleSizeChange",val)
        this.$store.dispatch("pagination/set_pageSize", val);
      },
      // 当前页: ${val}
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        // this.$emit("el-handleCurrentChange",val)
        this.$store.dispatch("pagination/set_currentPage4", val);
      }
    },
}
</script>
